import React, { Component } from 'react'

export default class APP extends Component {
  constructor(props) {
    super(props)

    this.state = {
      movies: ['星球大战', '盗梦空间', '蜘蛛侠', '钢铁侠']
    }
  }

  render() {
    return (
      <div>
        <h2>movie list</h2>
        <ul>
          {
            this.state.movies.map((item, index) => {
              return <li key={item}>{item}</li>
            })
          }
        </ul>
        <button onClick={ e => this.insertMovies() }>Add Movie</button>
      </div>
    )
  }

  insertMovies() {
    // this.setState({
    //   movies: [...this.state.movies, '大话西游']
    // })
    this.setState({
      movies: ['大话西游', ...this.state.movies]
    })
  }
}
